<!--  -->
<template>
  <div class>
    <Head></Head>
    <titlemeta></titlemeta>
    <div class="content">
      <div class="navContent">
        <div v-for="(item,index) in getproblemlistData" :key="index" class="navContent_list" @click="change(item)">
          <div class="navContent_list_name">{{item.problemInfoName}}</div>
          <div class="navContent_list_time">{{item.createTime | dataTime}}</div>
        </div>
      </div>
    </div>
        <div class="page">
          <Page :total="total" @on-change='changeVal' :page-size='listQuery.pageSize'/>
      </div>
    <Foot></Foot>
   <lefINvitation class="leftNvit" ref="lefINvitation" @buttop="buttop"></lefINvitation>
    <nightNvitation class="nightNvit" v-if="!mobilePc"></nightNvitation>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Head from "../../components/Head";
import Foot from "../../components/Foot";
import lefINvitation from "../../components/lefINvitation";
import nightNvitation from "../../components/nightNvitation";
import { problemlist } from "../../api/info";
import titlemeta from '../../components/titlemeta'
import {clieentWidth} from '../../utils/clientwidth'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Head,
    Foot,
    lefINvitation,
    nightNvitation,
    titlemeta
  },
  data() {
    //这里存放数据
    return {
       mobilePc:false,
      getproblemlistData: [],
      total:0,   // 数据总条数
      listQuery: {
        pageSize: 10,
        currentPage: 1,
        params: {
          problemId: ""
        }
      }
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getproblemlist() {
      problemlist(this.listQuery).then(res => {
     
        this.getproblemlistData = res.data.list;
        this.total = res.data.totalCount
          //  console.log(this.total);
      });
    },
    // 分页
    changeVal(val){
       this.listQuery.currentPage = val
       this.getproblemlist()
    },
    change(item){
       this.$router.push({path:'/problem',query:{id:item.id}})
    },
     // 回到顶部
    buttop(val) {
      if (val) {
        document.documentElement.scrollTop = 0;
      }
    },
          ismobilePc(){
      if(clieentWidth()){
        this.mobilePc = true
      }else{
        this.mobilePc = false
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.listQuery.params.problemId = this.$route.query.id;
    this.getproblemlist();
     this.ismobilePc()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
@import url("../../assets/nvit.scss");
//@import url(); 引入公共css类
.content {
  background-color: rgba(240, 240, 240, 1);
  padding: 0.5rem 0 2rem;
}
.navContent {
  width: 67%;
  // border-bottom: 1px solid rgba(54, 54, 54, 0.137);
  padding: 0.1rem 0;
  margin: auto;
  // text-align: center;
  background-color: white;
  //   text-align: center;
}
.navContent_list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: auto;
  padding: 0.2rem 0.2rem;
  border-bottom: 1px solid rgba(54, 54, 54, 0.137);
  cursor: pointer;
}
.navContent_list_name {
  width: 70%;
  white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.navContent_list_time {
  width: 20;
  white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.navContent_env {
  font-size: 0.3rem;
  color: #333;
  text-align: center;
}
.page{
  margin: auto;
  padding: 1rem 0 2rem;
  text-align: center;
}
@media screen and (max-width: 780px){
   .navContent {
     width: 75%;
      padding: 0.5rem 0;
   }
   .navContent_list{
     font-size: 0.9rem;
   }
}
</style>